Entwickler: Alle sprechen über Vue.js – warum ist das Framework denn so beliebt geworden?
Vanessa Böhner: Jeder Frontend Entwickler weiß, dass es in der JavaScript-Welt laufend neue Frameworks gibt. Um zu beantworten, wie Vue.js es geschafft hat, so eine Beliebtheit in der Community zu entwickeln, sollte man darüber nachdenken, wieso es überhaupt Frameworks gibt. In erster Linie geht es nicht darum, ob man komponentenbasiert in Single File Components oder in getrennten Dateien entwickeln möchte, eine starke Community zu haben oder Third-Party-Komponenten benutzen zu wollen. Unter dem Strich geht es hauptsächlich um die Lösung des Problems: Wie hält man den Stand des UI mit dem State der Daten konsistent? Seit sich das Web an vielen Stellen in Richtung Offline First und Mobile First entwickelte, gibt es immer mehr Applikationen, die in erster Linie „Client Heavy“ sind. Die Masse an Daten und Datenverwaltung ist kompliziert mit Vanilla JavaScript umzusetzen. Dieses Problem wird von Angular, React und Vue.js gelöst.
Dabei bedienen Angular und React zwei unterschiedliche Nutzergruppen (Nutzer sind hier immer die Entwickler). Angular mag einen an Spring erinnern. Es ermöglicht einen leichtern Umstieg für Java-Entwickler, um Projekte im Frontend bearbeiten zu können. Dabei gibt es ein klares Model-View-Viewmodel-Modell (MVVM) vor. Im Gegensatz zu dem bekannten MVC-Modell fällt hierbei der Controller weg, dafür wird eine neue Verbindung zwischen View und Modell genutzt, um datenbeeinflussende Nutzerinteraktionen schnell bearbeiten zu können. React auf der anderen Seite lässt den Entwicklern mehr Gestaltungsraum, am wichtigsten ist allerdings der Einsatz eines virtuellen DOMs. Mit diesem ist es möglich, Veränderungen am tatsächlich im Browser gerendertem DOM möglichst gering zu halten. Denn Neukalkulationen in der Rendering Pipeline können sehr teuer werden, zu Wackeln und Flackern führen.
An dieser Stelle kam Evan You hinzu, der damals bei Google angestellt war und in Angular schrieb. Er fragte sich, ob er die Mächtigkeit des Frameworks reduzieren, gleichzeitig die Vorteile von MVVM behalten könnte. Und so schuf er sozusagen einen Mix aus Angular und React mit MVVM und Virtual DOM.
Vue.js selber wirbt mit Worten wie „zugänglich“, „veränderbar“ und „performant“. Und genau das ist es – im Core kommt es fast ohne Features aus, was für leichtgewichtige Applikation perfekt ist. Der Einstieg ist einfach, man wird als Entwickler nicht unnötig abgelenkt und das Projekt wird nicht aufgeblasen. Gibt es dann ein Problem, wenn das Projekt größer wird? Auch nicht. Durch das Plugin-Konzept des Vue CLI 3 ist es sehr einfach, immer genau das richtige Plugin hinzuzufügen – egal, ob First Party oder Third Party. Vue.js ist heute keine One-Man-Show mehr. Es gibt mehrere großartige Entwickler, die gemeinsam an dem Framework arbeiten. Somit wurde zum Beispiel auch der Support für ältere Browser möglich gemacht, was für viele Firmenprodukte wichtig sein dürfte.
Wenn man mit dem progressiven Framework arbeitet, merkt man, dass es nicht von einem Konzern getrieben wird. Es ist von Entwicklern für Entwickler.
Entwickler: Wo liegen die größten Hürden beim Einstieg in die Arbeit mit Vue.js?
Vanessa Böhner: Wie gerade schon erwähnt: Es gibt sehr viele Frameworks. Als Resultat davon gibt es etliche Artikel, die sich mit der Thematik beschäftigen, mit welchem Framework man denn als Newbie beginnen sollte. Man spricht schon gar nicht mehr davon, dass man nun das Paket „HTML, JavaScript und CSS“ lernen möchte. Ob man mit diesen Techniken alleine heute überhaupt noch etwas online stellen könnte?
Es mag eine Hürde von Vue.js, aber auch allen anderen Frameworks sein, dass es immer noch keine Wunder bewirken kann. Es löst Probleme auf sehr elegante Weisen. Trotzdem sollte man sich mit den Basics der Webentwicklung auskennen. Vor ein bis zwei Jahren hätte ich hier an dieser Stelle noch argumentiert, dass hier und da vielleicht noch Dokumentationen oder Beispiele fehlen. Es war außerdem denkbar, dass es noch zu größeren Breaking Changes kommen könnte, da zum Beispiel auf die vue-dev-utils noch im Beta-Zustand waren. Diese Befürchtungen habe ich seit der Vorstellung von Vue.js 3 nicht mehr. Es ist meiner Meinung nach eine zukunftssichere Entscheidung.
Stolpersteine könnten sein, dass es immer noch einfach nur JavaScript ist und dementsprechend weniger Strukturen vorgibt, als sich so mancher Entwickler wünscht. Ja, es gibt mehrere Möglichkeiten, Komponenten zu registrieren. Man sich minuten- oder stundenlang fragen, ob man API-Requests in Helper-Funktionen, in Actions oder Mutations (Bestandteile des Vuex Stores) ausführt. Und dann kann man sogar nur JSX schreiben, da nichts dagegenspricht. Wichtig ist hier, sich für ein Projekt diverse Richtlinien aufzustellen, um solche Entscheidungsprozesse zu minimieren.
Entwickler: Vue.js baut ja auf Single File Components auf. Was genau versteht man darunter?
Vanessa Böhner: Das Konzept der Single File Components ist die Verbindung und gleichzeitig Kapsulierung von Markup, Style und Logik (HTML, CSS und JS). In älteren Legacy-Codebases findet man gerne große JavaScript-Files, die per jQuery auf weit entfernte HTML-Elemente zugreifen, von deren Existenz oder gerade aktuellem Zustand man gar nicht so wirklich Bescheid weiß. In Single File Components ist es möglich, alle zusammengehörende Bestandteile auf einen Blick zu sehen.
Gleichzeitig wird es vereinfacht, sich an das „Single Responsibility“- und das „Open/Closed“-Prinzip von SOLID zu halten. Nicht nur wird zusammengeführt, was zusammengehört. Es wird auch ferngehalten, was nicht in eine Komponente gehört. Hilfsfunktionen und übergreifende Algorithmen können aus dieser Komponente entfernt werden, um Wissen zu trennen und die Komponente leicht erweiterbar und auch testbar zu halten. Ein Beispiel: Die Komponente „Button“ wird geklickt. Es ist für den Button aber nicht interessant, welche Reaktion es auf die Aktion des Nutzers gibt. Fügt der Nutzer etwas dem Warenkorb hinzu oder möchte er sich einloggen? Oder lebt dieser Button gar nicht in einem Online-Shop? All das ist an dieser Stelle nicht interessant. Der Button sagt nur (oder benutzt emit für): „Ich wurde in meinem aktuellen Zustand X jetzt gerade geklickt.“
Entwickler: Wo liegen die Unterschiede von Vue.js im Vergleich zu einer typischen React-Anwendung?
Vanessa Böhner: Puh, Fragen zu Unterschiedenen zwischen den Frameworks oder gar Fragen dazu, was denn nun besser sei, beantworte ich immer eher ungern. React und Vue.js sind an vielen Punkten sehr ähnlich und setzen auf gleiche Prinzipien. Es wird ganz offen kommuniziert, dass sie sich gegenseitig inspirieren. React war damals ein neuer Stern am Himmel, der für einen großen Wirbel in der Welt von Backbone.js und jQuery sorgte. Man könnte behaupten, es habe den Weg für Vue.js dadurch auch vereinfacht, da Vue.js darauf aufbauen konnte, während es gleichzeitig flexibel und schnell auf weitere Wünsche in der Community einging.
Ein wichtiger subjektiver Punkt für mich ist die Art, wie ich mein Markup gestalte. Ich bin ein großer Fan davon, einfach nur HTML zu schreiben, wie in Vue.js in der <template>-Sektion. Da bin ich ohne JSX am schnellsten in der Entwicklung. Mit JSX könnte man seine Komfortzone verlassen, was nicht bedeutet, dass es nicht auch ein großartiges Tool wäre, wenn man es richtig verwendet. Und wie bereits vorher erwähnt – es ist kein Problem PUG oder JSX im Vue.js Templating einzusetzen.
Persönlich habe ich sehr viel Spaß bei der Entwicklung mit dem Vuex Store. Am Anfang hatte ich Angst, dass ich für etwas unnötiges und kleines jetzt einen großen Store mit viel Boilerplate anlege. Weit gefehlt – es ist so „einfach“! Da ich kein React schreibe, kann ich es nicht bewerten, aber ich höre, dass sich Redux stark von Vuex unterscheidet. Es ist mächtiger, aber auch komplizierter.
Auf der anderen Seite gibt es für React bereits React Native. Wenn man ein Fan davon ist, mobile Applikationen mit JavaScript zu entwickeln und das jetzt gerade in seinem Projekt benötigt, wäre hier dann React vielleicht die bessere Wahl. Aber auch bei Vue bewegt sich viel, wie z. B. hinsichtlich des serverseitigen Renderings. Sicher wird es auch hier bald Lösungen für mobile Applikationen geben.
Bevor ich noch weiter um den Punkt herumrede: Die Konzepte sind sehr ähnlich und ich kann niemandem meine Meinung aufzwingen. Einfach zwei Prototypen entwickeln, wir brauchen doch bestimmt noch eine Todo-Liste, und lernen, wie sich beide Frameworks anfühlen.
Entwickler: Kann man Vue.js auch in bereits bestehende Projekte integrieren?
Vanessa Böhner: Aber sicher! Bevor ich eigenständige Vue-Applikationen entwickelte, fing ich schon damit an, Vue.js in Monolithen einzubauen. Und: Es funktioniert ganz wunderbar.
Ob im gleichen Repository oder abgespalten, spielt hierbei eigentlich keine Rolle. Bei beiden Ansätzen gibt es Problemstellungen, die es dann zu lösen gibt. Im bestehenden Projekt muss man seine bestehende Buildpipeline überprüfen, wie man die Vue.js am besten mit dem vollen Funktionsumfang für Features wie Hot Module Replacement integrieren kann. In getrennten Repositories steht man vor da Frage, wie verschlungen die Bestandteile miteinander sind: Liefert man Source- oder gebundelten Code aus? Und wenn bereits als Bundle: als npm-Package, oder Git Tags? Da gibt es viele Herangehensweisen, die alle zum Ziel führen.
Empfehlenswert ist es, erst einmal mit einer unwichtigeren, bereits bestehenden Komponente anzufangen, zum Beispiel dem Footer. Hier geht normalerweise kein Call-to-Action-Button kaputt, wenn beim Deployment oder schon davor etwas doch noch nicht geht. Und bei bestehenden Dingen ist es leichter, das Ergebnis zu überprüfen. Ich würde nicht empfehlen, das neue, komplexe, umsatzgetrieben Feature mit einem neuen Framework umzusetzen, wenn das auch neue Erfahrungen für alle Entwickler sind.
Ansonsten steht dem Vorhaben aber wirklich nichts im Weg. Einbinden kann man eine Vue.js Single Page Application ganz einfach, in dem man ein <div> mit einer expliziten ID bereitstellt, wenn man noch vom Server gerendertes HTML durch PHP o. ä. ausliefert. Sobald die Seite geladen hat, kann JavaScript den Container mit der richtigen ID rauspicken und die Vue.js-Applikation dort hineinbauen. Daten können ganz einfach auch über dieses Div-Element mitgegeben werden oder man startet nun im created lifecycle hook API Requests. Wenn die Informationen noch weit verbreitet liegen, kann man auch auf Daten des window-Objekts zugreifen, auch wenn ich diese Methode nicht bevorzugen würde.
Entwickler: Was ist das wichtigste Take-away deiner Session, das du Teilnehmern mit auf den Weg geben möchtest?
Vanessa Böhner: Am wichtigsten ist zu verstehen, dass wir alle „nur“ Webentwickler sind. Ich bin kein Experte für Vue.js, Angular und React gleichzeitig, natürlich nicht. Ich möchte niemanden erzählen, dass Vue.js in irgendeiner Art und Weise besser wäre als andere Frameworks. Stattdessen möchte ich zeigen, wo die Stärken des Frameworks liegen, denn vielleicht löst das ein oder andere Beispiel bei so manchem schon ein aktuelles Problem. Und somit wird dann am Ende der Session auch die Angst vor Neuem und Ungewohnten genommen, denn unter dem Strich: Alles nur JavaScript!
Vielen Dank für das Interview!
Die Fragen stellte Ann-Cathrin Klose.
